<template>
  <j-date
    :show-time="false"
    :date-format="dateFormat"
    :placeholder="placeholder"
    class="query-group-date"
    :value="dateValue"
    @change="handleDateChange"
  ></j-date>
</template>

<script>
  import moment from 'moment'

  export default {
    // 对jdate二次封装，实现功能：展示的时候不显示时分秒，但是传给后台还是带时分秒
    name: 'PDate',
    props: {
      value: {
        type: String
      },
      // start: 开始时间, end: 结束时间
      type: {
        type: String,
        default: 'start',
        validator: function(value) {
          return ['start', 'end'].indexOf(value) !== -1
        }
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    data() {
      let dateStr = this.value
      return {
        dateFormat: Object.freeze('YYYY-MM-DD'),
        dateValue: !dateStr ? null : moment(dateStr).format(this.dateFormat)
      }
    },
    watch: {
      value(val) {
        if (!val) {
          this.dateValue = null
        } else {
          // this.dateValue = moment(val, this.dateFormat)
          this.dateValue = moment(val).format(this.dateFormat)
        }
      }
    },
    computed: {
      placeholder() {
        return this.type === 'start' ? '请选择开始时间' : '请选择结束时间'
      }
    },
    methods: {
      handleDateChange(value) {
        let result = null
        if (!!value) {
          result = `${value} ${this.type === 'start' ? '00:00:00' : '23:59:59'}`
        }
        this.$emit('change', result)
      }
    }
  }
</script>
